<template>
    <div class="SinglePage">
      <div>
        <el-input v-model="limit.key" placeholder="编号" style="width:200px"></el-input>
        <el-input v-model="limit.titleLike" placeholder="标题" style="width:200px"></el-input>
  
  
        <el-date-picker v-model="limit.value1" type="date" placeholder="发布时间起">
        </el-date-picker>
  
        <el-date-picker v-model="limit.value2" type="date" placeholder="发布时间止">
        </el-date-picker>
        <el-date-picker v-model="limit.value3" type="date" placeholder="修改时间起">
        </el-date-picker>
        <el-date-picker v-model="limit.value4" type="date" placeholder="修改时间止">
        </el-date-picker>
        <el-button type="primary" @click="search">搜索</el-button>
        <el-button type="success" @click="increase">添加</el-button>
  
      </div>
      <template>
        <el-table :data="tableData" style="width: 99%" height="450">
          <el-table-column label="编号" width="400">
            <template slot-scope="scope">
  
              <span style="margin-left: 10px">{{ scope.row.key }}</span>
            </template>
          </el-table-column>
          <el-table-column label="标题" width="400">
            <template slot-scope="scope">
              <el-popover trigger="hover" placement="top">
  
  
                <div slot="reference" class="name-wrapper">
                  <el-tag size="medium">{{ scope.row.title }}</el-tag>
                </div>
              </el-popover>
            </template>
          </el-table-column>
          <el-table-column label="操作">
            <template slot-scope="scope">
              <el-button size="mini" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
              <el-button size="mini" type="danger" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </template>
      <!-- 分页组件 -->
      <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage"
        :page-sizes="[10, 30, 50, 100]" :page-size="10" layout="total, sizes, prev, pager, next, jumper" :total="total">
      </el-pagination>
  

    </div>
  </template>
  
  <script>
  import { cmsdanye,cmssancudan } from "@/api/index"
  
  export default {
    name: 'SinglePage',
    data() {
      return {
  
        tableData: [],
        limit: {
          page: 1,
          pageSize: 10,
          // input1: '',
          // value1: '',
          // value2: '',
          // value3: '',
          // value4: '',
          // id: "",
          // key: "",
          // titleLike: "",
          // type: ""
        },
        currentPage: 1,
        total: 10,
        pickerOptions: {
          disabledDate(time) {
            return time.getTime() > Date.now();
          },
          shortcuts: [{
            text: '今天',
            onClick(picker) {
              picker.$emit('pick', new Date());
            }
          }, {
            text: '昨天',
            onClick(picker) {
              const date = new Date();
              date.setTime(date.getTime() - 3600 * 1000 * 24);
              picker.$emit('pick', date);
            }
          }, {
            text: '一周前',
            onClick(picker) {
              const date = new Date();
              date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit('pick', date);
            }
          }]
        },
        title: "",
      dialogFormVisible: false,
      form: {
        username: "",
        pwd: "",
        realname: "",
        mobile: "",
        userId: "",
      },
      formLabelWidth: '120px'
      }
    },
    methods: {
      handleEdit(index, row) {
        console.log(index,row);
      this.dialogFormVisible=true
      },
      handleDelete(index, row) {
        this.cmssancudans({
        id: row.id
      })
      },
      // 删除接口
      async cmssancudans(params) {
      let data = await cmssancudan(params)
      if (data.msg === "success") {
        this.$message({
          message: '删除成功',
          type: 'success'
        });
      } else {
        this.$message.error(data.msg);
      }
    },
      // 加载请求
      async getAdminlist(params) {
        let { data: res } = await cmsdanye(params)
        console.log(res);
        this.tableData = res.result
        this.total = res.totalRow
  
  
      },
      handleSizeChange(val) {
        // 选择多少条信息时 获取条数参数 重新请求接口,且把当前所在的页数默认为1
        console.log(`每页 ${val} 条`);
        this.limit.pageSize = val
        this.currentPage = 1
        this.limit.page = 1
        this.getAdminlist(this.limit)
      },
      handleCurrentChange(val) {
        // 获取到当前页 赋值给page 传给后端请求数据
        console.log(`当前页: ${val}`);
        this.currentPage = val
  
        this.limit.page = val
        this.getAdminlist(this.limit)
  
      },
      // 搜索
      search() {
        console.log(this.limit)
        this.getAdminlist(this.limit)
      },
      // 添加
      increase() {
        this.$router.push({
        path: "/CMS/IncreAse",
        // query:{
        // 	id:this.id
        // }
      })
      }
    },
  
    // 加载请求调用
    mounted() {
      this.getAdminlist(this.limit)
    },
  }
  </script>
  <style lang="scss" scoped>
  .SinglePage {
  
    &::v-deep td,
    th .cell {
      text-align: center;
    }
  
    &::v-deep .el-table th.el-table__cell>.cell {
      text-align: center;
    }
  }
  </style>